<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="queryPage.xmId" class="filter-item" placeholder="项目" style="width: 150px" clearable>
        <el-option v-for="item in xmList" :key="item.id" :label="item.xiangmumingcheng" :value="item.id" />
      </el-select>
      <el-select v-model="queryPage.type" class="filter-item" placeholder="分类" style="width: 150px" clearable>
        <el-option v-for="item in fenleiList" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-input v-model="queryPage.title" class="filter-item" placeholder="标题" style="width: 150px" clearable />
      <el-date-picker v-model="queryPage.beginDate" class="filter-item" type="date" placeholder="起始日期" value-format="yyyy-MM-dd" style="width: 150px" />
      <el-date-picker v-model="queryPage.endDate" class="filter-item" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 150px" />

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">查询</el-button>
    </div>

    <el-table v-loading="listLoading" :data="dataList" :height="tableHeight2" style="width: 100%;margin-top:10px; overflow:auto" border>
      <el-table-column label="序号" type="index" :index="indexMethod" header-align="center" align="center" width="80" />
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column label="项目名称" header-align="center" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.xmName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公告标题" header-align="center" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公告分类" header-align="center" align="left">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.type,'CDS_NOTICE_TYPE') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="来源URL" header-align="center" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.source }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" header-align="center" align="right">
        <template slot-scope="scope">
          <span>{{ scope.row.fabuTime }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" width="300px" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="View(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />

    <el-dialog :visible.sync="menuListVisible" :close-on-click-modal="false" append-to-body width="1000px" title="公告查看">
      <menu-list v-if="menuListVisible" ref="menuList" :proid="code" :visible.sync="menuListVisible" />
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/baseNotice'
import { getXiangMuList } from '@/api/projectInfo'
import { getDictListByCode } from '@/api/dict'

import { tableHeight2 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import MenuList from '../announce/view'

export default {
  components: { Pagination, MenuList },
  mixins: [tableHeight2],
  provide() {
    return {
      getList: this.loadList
    }
  },
  props: {
    keystr: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      content: null,
      xmList: [],
      fenleiList: [],
      id: '',
      code: '',
      listLoading: false,
      menuListVisible: false,
      dataList: [],
      total: 0,
      queryPage: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.loadList()
    this.getXiangMuList()
    this.getDictEntry('CDS_NOTICE_TYPE')
  },
  methods: {
    search() { // 查询
      this.loadList()
    },
    loadList() {
      this.screenLoading = true
      this.dataList = []

      this.queryPage.flag = '1'
      getList(this.queryPage).then(response => {
        this.dataList = response.data.records
        this.total = parseInt(response.data.total)
        this.screenLoading = false
      }).catch(response => {
        this.screenLoading = false
        this.listLoading = true
      })
    },
    indexMethod(index) {
      return (index + 1) + (this.queryPage.page - 1) * this.queryPage.limit
    },
    getXiangMuList() { // 加载列表
      this.xmList = []

      getXiangMuList().then(response => {
        this.xmList = response.data

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_NOTICE_TYPE') {
          this.fenleiList = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'CDS_NOTICE_TYPE') {
        dict = this.fenleiList
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    },
    View(e) {
      this.menuListVisible = true
      this.code = e
      this.$nextTick(() => {
        this.$refs.menuListVisible
        this.$refs.menuList.getDetailed()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding:10px 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .date-filter-item{
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
.pagination-container {
  margin-top: 0 !important;
  padding: 10px 16px !important;
}
</style>

